<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="styles/jquery.mobile-1.0b1.css">
<link type="text/css" rel="stylesheet" href="styles/override.css">
<script type="text/javascript" charset="utf-8" src="scripts/iscroll.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery.mobile-1.0b1.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/phonegap.0.9.5.1.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/global.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/musicscanner.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/fileresolver.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/store-to-localstorage.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/databaseresolver.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/notification.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/mediaplayer.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/utils.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/uihandler.js"></script>
<script type="text/javascript">
function onLoad() {
	// add listener to phonegap
	document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
	console.log("device is ready");
}
</script>
<script type="text/javascript" charset="utf-8">
var myScroll;
var a = 0;

function loaded() {
	console.log("iscroll is loaded");
	setHeight();	// Set the wrapper height. Not strictly needed, see setHeight() function below.
	// Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
	setTimeout(function () {
		myScroll = new iScroll('scroller', {desktopCompatibility:true});
	}, 100);
}
 
// Change wrapper height based on device orientation. Not strictly needed by iScroll, you may also use pure CSS techniques.
function setHeight() {
//	var headerH = document.getElementById('header').offsetHeight,
//		footerH = document.getElementById('footer').offsetHeight,
//		wrapperH = window.innerHeight - headerH - footerH;
	document.getElementById('wrapper').style.height = 200 + 'px';
}

// Check screen size on orientation change
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);
 
// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</head>
<body onload="onLoad()">
<div data-role="page" data-theme="a">
<div data-role="header" data-nobackbtn="true" data-theme="e">
    <h1>Audio Player with Phonegap and jQuery Mobile</h1>
</div>
<div data-role="navbar" data-theme="c">
	<ul>
	    <li><a id="nav-main">Main Panel</a></li>
	    <li><a id="nav-update">Update Lib</a></li>
	</ul>
</div>
<div data-role="content" id="main-panel" data-theme="a">
	<div data-role="controlgroup"  data-type="horizontal">
		<a id="play" href="#" data-role="button">play</a>
		<a id="pause" href="#" data-role="button">pause</a>
		<a id="stop" href="#" data-role="button">stop</a>
	</div>
	<div id="wrapper"> 
		<div id="scroller">
			<ul id="list" data-role="listview" data-theme="e"></ul>
		</div> 
	</div> 
</div>
<div data-role="content" id="update-lib" data-theme="a">
	<input type="button" value="scan" onclick="scanSDcard()" />
<!--	<input type="button" value="read" onclick="readFiles()" />-->
	<input type="button" value="store to file" onclick="storeToFile()" />
	<!--<input type="button" value="store to localstorage" onclick="storeToLocalStorage()" />-->
	<input type="button" value="store to database" onclick="storeToDatabase()" />
	<input type="button" value="read folder" onclick="queryFolder(['folder'])" />
</div>
<div data-role="footer" data-theme="e">
    <div data-role="navbar">
    <ul> 
        <li><a>Current: <span id="current_position">0 sec</span></a></li>
        <li><a>Total: <span id=duration>0 sec</span></a></li>
    </ul> 
    </div>
</div>
</div>
</body>
</html>